<template>
	<view class="container">
		<view class="shopping-cart">
			<view class="shopping-cart-list">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
					<view class="check-box-dm" v-for="(item, index) in checkboxList" :key="index">
						<u-checkbox :customStyle="{marginBottom: '8px'}" :name="item.name">
						</u-checkbox>
						<view class="shopping-cart-item">
							<view class="img-box">
								<img src="https://cdn.uviewui.com/uview/swiper/swiper1.png" alt="">
							</view>
							<view>
								<view style="font-size: 32rpx;font-weight: 600;">大麦植发洗发水</view>
								<view style="font-size: 28rpx;color: #999;
												overflow: hidden;
												text-overflow: ellipsis;
												display: -webkit-box;
												-webkit-line-clamp: 2;
												-webkit-box-orient: vertical;">
									大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水大麦植发洗发水</view>
								<view
									style="font-size: 28rpx;color: #dd2a2a;display: flex;justify-content: space-between;">
									<view>320 ${{item.value}}</view>
									<view><u-number-box @change='numberChange' size='20rpx' v-model="item.value"
											:name='item.name'></u-number-box></view>
								</view>
							</view>
						</view>

					</view>
				</u-checkbox-group>
				<!-- <view class="shopping-cart-item">
					<uni-data-checkbox v-model="value" :localdata="range">
						啊倒萨
					</uni-data-checkbox>
					<view class="img-box">
						<img src="https://cdn.uviewui.com/uview/swiper/swiper1.png" alt="">
					</view>
					<view>大麦植发洗发水</view>
					<view>320 $</view>
				</view> -->



			</view>
		</view>
		<view class="footer-bottom-box">
			<view>
				<u-checkbox-group v-model="allValue" placement="column">
					<u-checkbox name="all" label="全选">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="color: red;font-size:32rpx;   word-break: break-all;margin-right: 20rpx;">
						合计：{{allMoney}}
					</view>
					<view style="width: 300rpx;">
						<u-button type="error" shape='circle' text="确定"></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MallCenter',
		data() {
			return {
				allValue: [],
				checkboxValue: [],
				// 基本案列数据
				checkboxList: [{
						name: '苹果',
						value: 1,
						disabled: false,
						money: 100
					},
					{
						name: '香蕉',
						value: 1,
						disabled: false,
						money: 100
					},
					{
						name: '橙子',
						value: 1,
						disabled: false,
						money: 100
					}
				],
				allMoney: 0
			}
		},
		methods: {
			numberChange(data) {
				let all = 0
				console.log(this.checkboxList);
				this.checkboxList.forEach(item => {
					if (item.name === data.name) {
						item.value = data.value
					}
					console.log(item.disabled);
					if (item.disabled) {
						all += item.value * item.money
					}
				})
				this.allMoney = all
			},
			checkboxChange(n) {
				let all = 0
				this.checkboxList.forEach(item => {
					let i = n.findIndex(i => {
						return i == item.name
					})
					if (i >= 0) {
						item.disabled = true
					} else {
						item.disabled = false
					}
					n.forEach(i => {
						if (item.name == i) {
							all += item.value * item.money
						} else {}
					})
				})
				this.allMoney = all
			},
			branchCourtListClick() {
				uni.navigateTo({
					url: '/pages-makeAnAppointmentCenter/BranchCourtList/index'
				})
			}
		},
		created() {
			let all = 0
			this.checkboxList.forEach(item => {
				if (item.disabled) {
					all += item.value * item.money
				}
			})
			this.allMoney = all
		}
	}
</script>

<style lang="scss">
	@import 'index.scss'
</style>